<!-- <template>
  <div ref="cesiumContainer" class="cesium-container"></div>
</template>
  
<script>
import { ref, onMounted } from 'vue';
import * as Cesium from 'cesium';

import { AccessToken } from '../utils/constValues';

// 设置cesium的Access Token
Cesium.Ion.defaultAccessToken = AccessToken;

export default {
  name: 'CesiumViewer',
  setup() {
    // 将cesium名称设置成动态变量
    const cesiumContainer = ref(null);

    // 渲染方法
    onMounted(async () => {
      // 创建 Cesium Viewer 实例
      const viewer = new Cesium.Viewer(cesiumContainer.value, {
        animation: false, //是否显示动画控件
        homeButton: false, //是否显示home键
        geocoder: false,// 查询
        baseLayerPicker: false, //是否显示图层选择控件
        timeline: false, //是否显示时间线控件
        fullscreenButton: false, //是否全屏显示
        scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        infoBox: false, //是否显示点击要素之后显示的信息
        // sceneModePicker: true, //是否显示投影方式控件  三维/二维
        navigationHelpButton: false, //是否显示帮助信息控件
        skyAtmosphere: false,
        // orderIndependentTranslucency: false,
      });

      viewer.scene.sun.show = false;
      viewer.scene.moon.show = false;
      viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
      viewer.scene.undergroundMode = true;
      viewer.scene.globe.show = true;
      // viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;
      viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5600000;
      if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        //判断是否支持图像渲染像素化处理
        viewer.resolutionScale = window.devicePixelRatio;
      }
      viewer.scene.fxaa = true;
      viewer.scene.postProcessStages.fxaa.enabled = true;
      // 隐藏版权
      viewer._cesiumWidget._creditContainer.style.display = "none";

      // 添加tiff显示
      let imageryProvider = new Cesium.WebMapServiceImageryProvider({
        // 这里是你的 geoserver服务点击查看图层的 url
        url: '/geoserver/Xiongan_tif/wms',
        // 这里是自定义的图层名称
        layers: 'geotiff_coverage',
        parameters: {
          service: 'WMS',
          format: 'image/png',
          transparent: true
        }
      });
      // 图层添加
      viewer.imageryLayers.addImageryProvider(imageryProvider);

      // 添加GeoJSON显示
      const geoJson = Cesium.GeoJsonDataSource.load(
        "/static/Xiongan.json",
        {
          stroke: Cesium.Color.BLACK,
          fill: Cesium.Color.GREEN.withAlpha(0.6),
          strokeWidth: 3,
        }
      );
      viewer.dataSources.add(geoJson);

      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(115.9812, 38.940, 120000.0)
      });
    });

    return {
      cesiumContainer,
    };
  },
};
</script>
  
<style>
.cesium-container {
  width: 100%;
  height: 100%;
}
</style>
     -->